<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
         *{
        margin: 0;
        padding: 0;
    }
    #box{
        width:800px;
        height:600px;
        position: relative;
        margin: 100px auto;
        background:#000000;
        border:2px solid red;
        overflow: hidden;
    }
    .ball{
        width: 10px;
        height: 10px;
        border-radius: 50%;
        position: absolute;
        bottom: 0;
    }
    .ballbox{
        width: 5px;
        height: 5px;
        border-radius: 50%;
        position: absolute;
        bottom: 0;
    }
    </style>
   
</head>
<body>
    <div id="box"></div>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>


    <script>
        // 构造函数
        function Firework(){
            this.box=document.querySelector("#box")
            this.AddEvent()
            this.autoFire()
        }

        // 绑定事件
        Firework.prototype.AddEvent=function(){
            // 使用箭头函数改变this指向
            this.box.onclick=(e)=>{
                var e=e || event
                // 使用fire接收创建函数的返回值
                var fire=this.createEvent()
                // 起始位置
                fire.style.left=e.offsetX+"px"

                $(fire).animate({
                    top : e.offsetY
                },800 , ()=>{
                    // 移动结束后调用回调函数删除元素
                    fire.remove();
                    this.createbox(e)
                })
               
                
            }
        }
        // 创建元素
        Firework.prototype.createEvent=function(){
            var div=document.createElement("div");
            div.className = "ball";
            div.style.backgroundColor = "#" + Math.round(parseInt("ffffff", 16) * Math.random()).toString(16).padStart( 6 , "0");
            this.box.appendChild(div)
            return div
        }

     


         // 创建散开的元素
         Firework.prototype.createbox=function(e){
             var deg=0
            for(var i=0;i<20;i++){
                var p=document.createElement("p");
                deg+=18
                var r=100
                let hudu = (deg * Math.PI) / 180;
                p.className = "ballbox";
                p.style.backgroundColor = "#" + Math.round(parseInt("ffffff", 16) * Math.random()).toString(16).padStart( 6 , "0");
                p.style.left=e.offsetX+"px"
                p.style.top=e.offsetY+"px"
                this.box.appendChild(p)
                $(p).animate({
                    top : Math.round(Math.sin( Math.PI / 180 * deg ) * r)+e.offsetY,
                    left:Math.round(Math.cos( Math.PI / 180 * deg ) * r)+e.offsetX
                },1000,function(){
                    var p=document.getElementsByTagName("p")
                    for(let j=0;j<p.length;j++){
                        p[j].remove();
                    }
                   
                })
               
            }
        }

        Firework.prototype.autoFire = function(){
            var self = this;
            setInterval(function(){
                self.box.onclick({
                    offsetX : Math.round( Math.random() * self.box.offsetWidth) + 100,
                    offsetY : Math.round( Math.random() * self.box.offsetHeight) + 100
                });
            }, 1000)
        }
        var fw = new Firework();
    </script>
</body>
</html>